Skip to main content

React Support Library

  1. How to use Font Awesome icons in React?​

    The below steps followed to include Font Awesome in React:

    1. Install font-awesome:

      $ npm install --save font-awesome

    2. Import font-awesome in your index.js file:

      import "font-awesome/css/font-awesome.min.css";

    3. Add Font Awesome classes in className:

      render() {
        return <div><i className={'fa fa-spinner'} /></div>
      }

⬆ Back to Top

  1. What is React Dev Tools?​

    React Developer Tools let you inspect the component hierarchy, including component props and state. It exists both as a browser extension (for Chrome and Firefox), and as a standalone app (works with other environments including Safari, IE, and React Native).

    The official extensions available for different browsers or environments.

    1. Chrome extension
    2. Firefox extension
    3. Standalone app (Safari, React Native, etc)

⬆ Back to Top

  1. Why is DevTools not loading in Chrome for local files?​

    If you opened a local HTML file in your browser (file://...) then you must first open Chrome Extensions and check Allow access to file URLs.

⬆ Back to Top

  1. How to use Polymer in React?​

    You need to follow below steps to use Polymer in React,

    1. Create a Polymer element:

      <link
        rel="import"
        href="../../bower_components/polymer/polymer.html"
      />;
      Polymer({
        is: "calendar-element",
        ready: function () {
          this.textContent = "I am a calendar";
        },
      });

    2. Create the Polymer component HTML tag by importing it in a HTML document, e.g. import it in the index.html of your React application:

      <link
        rel="import"
        href="./src/polymer-components/calendar-element.html"
      />

    3. Use that element in the JSX file:

      import React from "react";

      class MyComponent extends React.Component {
        render() {
          return <calendar-element />;
        }
      }

      export default MyComponent;

⬆ Back to Top

  1. What are the advantages of React over Vue.js?​

    React has the following advantages over Vue.js:

    1. Gives more flexibility in large apps developing.
    2. Easier to test.
    3. Suitable for mobile apps creating.
    4. More information and solutions available.

Note: The above list of advantages are purely opinionated and it vary based on the professional experience. But they are helpful as base parameters.

⬆ Back to Top

  1. What is the difference between React and Angular?​

    Let's see the difference between React and Angular in a table format.

    ReactAngular
    React is a library and has only the View layerAngular is a framework and has complete MVC functionality
    React handles rendering on the server sideAngularJS renders only on the client side but Angular 2 and above renders on the server side
    React uses JSX that looks like HTML in JS which can be confusingAngular follows the template approach for HTML, which makes code shorter and easy to understand
    React Native, which is a React type to build mobile applications are faster and more stableIonic, Angular's mobile native app is relatively less stable and slower
    In React, data flows only in one way and hence debugging is easyIn Angular, data flows both way i.e it has two-way data binding between children and parent and hence debugging is often difficult

Note: The above list of differences are purely opinionated and it vary based on the professional experience. But they are helpful as base parameters.

⬆ Back to Top

  1. Why React tab is not showing up in DevTools?​

    When the page loads, React DevTools sets a global named __REACT_DEVTOOLS_GLOBAL_HOOK__, then React communicates with that hook during initialization. If the website is not using React or if React fails to communicate with DevTools then it won't show up the tab.

⬆ Back to Top

  1. What are Styled Components?​

    styled-components is a JavaScript library for styling React applications. It removes the mapping between styles and components, and lets you write actual CSS augmented with JavaScript.

⬆ Back to Top

  1. Give an example of Styled Components?​

    Lets create <Title> and <Wrapper> components with specific styles for each.

    import React from "react";
    import styled from "styled-components";

    // Create a <Title> component that renders an <h1> which is centered, red and sized at 1.5em
    const Title = styled.h1`
      font-size: 1.5em;
      text-align: center;
      color: palevioletred;
    `;

    // Create a <Wrapper> component that renders a <section> with some padding and a papayawhip background
    const Wrapper = styled.section`
      padding: 4em;
      background: papayawhip;
    `;

    These two variables, Title and Wrapper, are now components that you can render just like any other react component.

    <Wrapper>
      <Title>{"Lets start first styled component!"}</Title>
    </Wrapper>

⬆ Back to Top

  1. What is Relay?​

    Relay is a JavaScript framework for providing a data layer and client-server communication to web applications using the React view layer.

⬆ Back to Top

  1. How to use TypeScript in create-react-app application?​

    Starting from react-scripts@2.1.0 or higher, there is a built-in support for typescript. i.e, create-react-app now supports typescript natively. You can just pass --typescript option as below

    npx create-react-app my-app --typescript

    # or

    yarn create react-app my-app --typescript

    But for lower versions of react scripts, just supply --scripts-version option as react-scripts-ts while you create a new project. react-scripts-ts is a set of adjustments to take the standard create-react-app project pipeline and bring TypeScript into the mix.

    Now the project layout should look like the following:

    my-app/
    ├─ .gitignore
    ├─ images.d.ts
    ├─ node_modules/
    ├─ public/
    ├─ src/
    │  └─ ...
    ├─ package.json
    ├─ tsconfig.json
    ├─ tsconfig.prod.json
    ├─ tsconfig.test.json
    └─ tslint.json